<template>
  <view class="container">
    <view class="login-container">
      <image :src="baseImgUrl + 'beforeBg.png'"></image>
      <view class="title">欢迎使用{{ role == 'fj' ? '辅警' : '网格员' }}信息采集小程序！</view>
      <view style="width: 100%">
        <u--input placeholder="请输入手机号" border="surround" type="number" shape="circle" :maxlength="11"
          v-model="phoneNumber" prefixIcon="man-add" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
      </view>
      <view style="width: 100%">
        <u--input placeholder="请输入密码" border="surround" :maxlength="6" shape="circle" v-model="password" type="password"
          prefixIcon="lock" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
      </view>
      <view class="reset-img-wrapper">
        <text @click="showReset = true">重置密码</text>
      </view>
      <u-button type="primary" text="登录" shape="circle" color="#0081FF" @click="login"></u-button>
    </view>

    <u-popup :show="showReset" mode="center" @close="close" @open="open" closeable :round="8">
      <view class="reset-wrapper-yy">
        <view class="title-c">
          重置密码
        </view>
        <view style="width: 100%">
          <view class="title-i">
            账号:
          </view>
          <u--input placeholder="请填写登录手机号码" border="surround" clearable shape="circle" type="number" :maxlength="11"
            v-model="resetForm.mobile" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
        </view>
        <view style="width: 100%">
          <view class="title-i">
            身份证号:
          </view>
          <u--input placeholder="请填写备案身份证号" clearable border="surround" :maxlength="18" shape="circle"
            v-model="resetForm.idCard" type="idcard" prefixIconStyle="font-size: 22px;color: #909399"></u--input>

          <view style="padding-top: 63rpx;">
            <u-button type="primary" text="提交" shape="circle" color="#0081FF" @click="handleReset"></u-button>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import {
    postAction
  } from "@/utils/request.js";
  import {
    Toast,
    checkIDCard,
    getLocation,
    isLoading
  } from "../../utils/util";
  import {
    userDecrypt
  } from "../../api/api";
  export default {
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        phoneNumber: "",
        password: "",
        role: uni.getStorageSync('role'),
        showReset: false,
        resetForm: this.initResetForm()
      };
    },
    onLoad(options) {

    },
    onShow() {},
    methods: {
      close() {
        this.showReset = false
        this.resetForm = this.initResetForm()
      },
      open() {

      },
      async login() {
        if (!this.phoneNumber) {
          Toast("请输入手机号");
          return;
        }

        if (!this.password) {
          Toast("请输入密码");
          return;
        }

        let reg = /^1[3456789]\d{9}$/;
        if (!reg.test(this.phoneNumber)) {
          Toast("请输入正确的手机号");
          return;
        }

        let url = this.role == 'fj' ? "/fj/fjUser/login" : "/wgy/wgyUser/login";
        isLoading()
        uni.login({
          success: (res) => {
            this.code = res.code;
            userDecrypt({
              code: this.code,
            }).then(async (res) => {
              const openId = res.result.openid;
              try {
                let res = await postAction(url, {
                  username: this.phoneNumber,
                  password: this.password,
                  openId
                });
                const {
                  refreshToken,
                  token,
                  userInfo
                } = res.result;
                uni.setStorageSync("refreshToken", refreshToken); //刷新token 参数值
                uni.setStorageSync("X-MINI-TOKEN", token);
                uni.setStorageSync("user", userInfo);
                this.$store.commit('SET_USER_INFO', userInfo)
                uni.reLaunch({
                  url: "/pages/home/home",
                });
              } catch (e) {
                console.log(e)
                //TODO handle the exception
              } finally {
                isLoading(false)
              }
            })
          },
        })
      },
      initResetForm() {
        return {
          mobile: '',
          idCard: ''
        }
      },
      async handleReset() {
        const {
          mobile,
          idCard
        } = this.resetForm

        if (!mobile) {
          Toast("请输入账号！");
          return;
        }
        let reg = /^1[3456789]\d{9}$/;
        if (!reg.test(mobile)) {
          Toast("请输入正确的手机号！");
          return;
        }

        if (!idCard) {
          Toast("请输入身份证号！");
          return;
        }
        if (!checkIDCard(idCard)) {
          Toast("身份证号码校验不通过，请检查！");
          return;
        }
        let url = this.role == 'fj' ? "/fj/fjUser/retrieve_password" : "/wgy/wgyUser/retrieve_password";
        isLoading(true)
        postAction(url, this.resetForm)
          .then((res) => {
            if (res.code == 200) {
              this.resetForm = this.initResetForm()
              this.showReset = false
            }
            Toast(res.message)
          })
          .finally(() => {
            isLoading(false)
          })

      }
    },
  };
</script>

<style lang="scss">
  /deep/ .reset-wrapper-yy {
    padding: 30rpx;
    width: 718rpx;

    .title-c {
      font-weight: bold;
      font-size: 36rpx;
      color: #000000;
      text-align: center;
      margin-bottom: 83rpx;
    }

    .title-i {
      font-weight: 500;
      font-size: 30rpx;
      color: #666666;
      margin-bottom: 13rpx;
      padding-left: 26rpx;
      margin-top: 36rpx;
    }
  }
</style>
<style scoped lang="scss">
  .container {
    width: 100%;
    height: 100%;
    background: #2491fc;
    position: relative;
  }

  .login-container {
    position: absolute;
    width: 712rpx;
    height: 589rpx;
    background: #ffffff;
    border-radius: 16rpx;
    top: 373rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    left: 50%;
    transform: translateX(-50%);

    padding: 66rpx 36rpx;
    padding-bottom: 72rpx;

    image {
      position: absolute;
      top: -370rpx;
      width: 488rpx;
      height: 370rpx;
    }

    .title {
      font-weight: bold;
      font-size: 40rpx;
      color: #273923;
    }

    .reset-img-wrapper {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      font-weight: 500;
      font-size: 28rpx;
      color: #2488F5;
      width: 100%;
      padding-right: 27rpx;
    }
  }
</style>